<template>
  <nav class="sidebar-menu">
    <ul>
      <li
        v-for="(item, idx) in menuList"
        :key="item.label"
        :class="['menu-item', { 'has-children': item.children }]"
      >
        <div class="menu-main" @click="handleMenuClick(idx, item)">
          <span class="icon">
            <img v-if="item.icon" :src="item.icon" alt="icon" />
          </span>

          <!-- 主体文字 -->
          <span class="label">{{ _t18(item.label) }}</span>

          <!-- ✅ 动态语言图标靠右显示 -->
          <img
            v-if="item.key === 'lang' && currentLanguage?.imgUrl"
            :src="currentLanguage.imgUrl"
            alt="lang"
            class="lang-flag"
          />

          <span v-if="item.children" class="arrow" :class="{ open: openIndex === idx }">
            <img src="/static/img/fJu_55dc095c_xhq.d506c924.svg" alt="" />
          </span>
        </div>

        <ul v-if="item.children && openIndex === idx" class="submenu">
          <li
            v-for="(sub, subIdx) in item.children"
            :key="sub.label"
            class="submenu-item"
            @click="handleSubMenuClick(item, sub)"
          >
            <span class="label">{{ _t18(sub.label) }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </nav>

  <!-- 退出弹窗 -->
  <Dialog
    v-model:value="showDialog"
    :content="_t18('layout_require')"
    confirm-button-color="#df163d"
    cancel-button-color="#333333"
    :show-close-icon="false"
    @cancelBtn="cancelBtn"
    @confirmBtn="confirmBtn"
    :confirmButtonText="_t18('btnConfirm', ['bitmake'])"
    :cancelButtonText="_t18('cancel')"
    z-index="200"
  >
    <template #icon>
      <div class="dialog-icon-wrap">
        <svg-load name="tanchuang-jinggao" class="dialog-icon" />
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { signOut } from '@/api/user'
import { useUserStore } from '@/store/user/index'
import { useMainStore } from '@/store/index'
import { _t18, _toReplace } from '@/utils/public'
import Dialog from '@/components/Dialog/index.vue'
import { useToast } from '@/hook/useToast'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const emit = defineEmits(['closeSideBarr'])
const router = useRouter()
const openIndex = ref(null)
const userStore = useUserStore()
const mainStore = useMainStore()
const { _toast } = useToast()
const showDialog = ref(false)

/**
 * ✅ 动态获取当前语言图标
 */
const currentLanguage = computed(() =>
  mainStore.languageList.find((elem) => elem.dictValue == mainStore.language)
)

/**
 * 登出
 */
const confirmBtn = () => {
  showDialog.value = false
  signOut().then((res) => {
    if (res.code === 200) {
      _toast('layout_success')
      userStore.signOut()
      emit('closeSideBarr')
      _toReplace('/')
      setTimeout(() => (window.location.href = '/'), 0)
    }
  })
}
const cancelBtn = () => (showDialog.value = false)

/**
 * 点击子菜单
 */
function handleSubMenuClick(item, sub) {
  const parent = item.key
  const child = sub.key

  if (parent === 'contract' && child === 'contract') return router.push('/quantContract')
  if (parent === 'contract' && child === 'order') return router.push('/quantContractOrder')

  if (parent === 'earn' && child === 'earn') return router.push('/earnCoins')
  if (parent === 'earn' && child === 'faq') return router.push('/problem')
  if (parent === 'earn' && child === 'profit') return router.push('/earnStatistics')

  if (parent === 'option' && child === 'option')
    return router.push({ path: '/trade', query: { tabIndex: 0, title: t('24_option') } })
  if (parent === 'option' && child === 'order') return router.push('/quantContractOrder1')

  if (parent === 'spot' && child === 'spot')
    return router.push({ path: '/trade', query: { tabIndex: 1, title: t('trade_top_tab3'), type: 1 } })
  if (parent === 'spot' && child === 'order') return router.push('/quantCurrencyOrder')

  if (parent === 'futures' && child === 'futures')
    return router.push({ path: '/trade', query: { tabIndex: 2, title: t('latcoin_trade_tab5'), type: 2 } })
  if (parent === 'futures' && child === 'order') return router.push('/quantUstandardOrder')

  if (parent === 'security' && child === 'auth') return router.push('/auth-center')
  if (parent === 'security' && child === 'resetPwd') return router.push('/change-password')
  if (parent === 'security' && child === 'bindCard') return router.push('/bind-card')
  if (parent === 'security' && child === 'fundPwd') return router.push('/fund-password')

  if (parent === 'knowledge' && child === 'notice') return router.push('/consult')
  if (parent === 'knowledge' && child === 'whitepaper') return router.push('/whitepaper')
  if (parent === 'knowledge' && child === 'terms') return router.push('/termsOfuse')

  if (parent === 'app' && (child === 'ios' || child === 'android'))
    return window.open('https://www.abtcoins.ai/', '_blank')
}

/**
 * 菜单列表
 */
const menuList = [
  { key: 'home', label: '24_home', icon: '/static/images-ai/menu/Rg7_ca5dc5c1_1B6.svg' },
  { key: 'assets', label: '24_assets', icon: '/static/images-ai/menu/Oqe_a45a02c1_bM6.svg' },
  {
    key: 'contract',
    label: '24_contract',
    icon: '/static/img/oT1_016961c9_GDg.4fb49c5d.svg',
    children: [
      { key: 'contract', label: '24_contract_sub' },
      { key: 'order', label: '24_order' }
    ]
  },
  { key: 'borrow', label: '24_borrow', icon: '/static/images-ai/menu/SYq_f26f6701_YdQ.svg' },
  {
    key: 'earn',
   label: '24_earn',
    icon: '/static/img/prh_4dc815c2_Rtj.56abae9b.svg',
    children: [
      { key: 'earn', label: '24_earn_sub' },
      { key: 'faq', label: '24_faq' },
      { key: 'profit', label: '24_profit' }
    ]
  },
 // {
   // key: 'option',
  //  label: '24_option',
  //  icon: '/static/images-ai/menu/upz_6155da5e_GIl.svg',
   // children: [
  //    { key: 'option', label: '24_option_sub' },
   //   { key: 'order', label: '24_order' }
   // ]
 // },
  {
    key: 'spot',
    label: '24_spot',
    icon: '/static/images-ai/menu/upz_6155da5e_GIl.svg',
    children: [
      { key: 'spot', label: '24_spot_sub' },
      { key: 'order', label: '24_order' }
    ]
  },
  {
    key: 'futures',
    label: '24_futures',
    icon: '/static/images-ai/menu/oT1_016961c9_GDg.svg',
    children: [
      { key: 'futures', label: '24_futures_sub' },
      { key: 'order', label: '24_order' }
    ]
  },
  {
    key: 'security',
    label: '24_security',
    icon: '/static/images-ai/menu/kZQ_b0da8714_cIG.svg',
    children: [
      { key: 'auth', label: '24_auth' },
      { key: 'resetPwd', label: '24_resetPwd' },
      { key: 'bindCard', label: '24_bindCard' },
      { key: 'fundPwd', label: '24_fundPwd' }
    ]
  },
 // 下载APP{ key: 'invite', label: '24_invite', icon: '/static/images-ai/menu/Phs_27c2c4b5_Nfu.svg' },
  //{
  //  key: 'app',
   // label: '24_app',
   // icon: '/static/images-ai/menu/iia_eb2c2cc4_qHO.svg',
  //  children: [
  //    { key: 'ios', label: '24_ios' },
  //    { key: 'android', label: '24_android' }
  //  ]
 // },
  { key: 'finance', label: '24_finance', icon: '/static/images-ai/menu/caK_d36282cc_aKC.svg' },
  { key: 'email', label: '24_email', icon: '/static/images-ai/menu/Yls_1f11ff58_oeU.svg' },
  {
    key: 'knowledge',
    label: '24_knowledge',
    icon: '/static/images-ai/menu/RBz_c344f595_3Ek.svg',
    children: [
      { key: 'notice', label: '24_notice' },
    //  { key: 'whitepaper', label: '24_whitepaper' },
      { key: 'terms', label: '24_terms' }
    ]
  },
  { key: 'about', label: '24_about', icon: '/static/images-ai/menu/vCT_e220ddd0_S0N.svg' },
  { key: 'lang', label: '24_lang', icon: '/static/images-ai/menu/mu9_e86b9828_4Uo.svg' },
  { key: 'logout', label: '24_logout', icon: '/static/images-ai/menu/qXd_c8be8473_S4k.svg' }
]

/**
 * 一级菜单点击
 */
function handleMenuClick(idx, item) {
  const key = item.key
  if (key === 'home') return router.push('/')
  if (key === 'assets') return router.push('/assets')
  if (key === 'borrow') return router.push('/borrowingCurrency')
  if (key === 'finance') return router.push('/finance-record')
  if (key === 'email') return router.push('/email-authentication')
  if (key === 'invite') return router.push('/invite-friend')
  if (key === 'lang') return router.push('/language-selection')
  if (key === 'about') return router.push('/about-us')
  if (key === 'logout') {
    showDialog.value = true
    return
  }
  openIndex.value = openIndex.value === idx ? null : idx
}
</script>

<style scoped lang="scss">
.sidebar-menu {
  width: 100%;
  background: transparent;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
.menu-item {
  margin-bottom: 6px;
  .menu-main {
    display: flex;
    align-items: center;
    padding: 8px 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    position: relative;
    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .icon {
      width: 42px;
      height: 42px;
      background: #eee;
      border-radius: 50%;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .label {
      font-weight: 700;
      font-size: 16px;
      color: #222;
      flex: 1;
    }

    /* ✅ 国旗靠右显示 + 放大 */
    .lang-flag {
      width: 24px;
      height: 24px;
     // border-radius: 3px;
      margin-right: 10px;
     // object-fit: cover;
    }

    .arrow {
      transition: transform 0.2s;
      transform: rotate(-90deg);
      &.open {
        transform: rotate(0);
      }
    }
  }

  .submenu {
    padding-left: 72px;
    .submenu-item {
      padding: 10px 0;
      .label {
        font-size: 13px;
        color: #444;
      }
    }
  }
}
</style>
